<template>
	<div class="loanmore_page">
		<ul
		  v-infinite-scroll="loadMore"
		  infinite-scroll-disabled="loading"
		  infinite-scroll-distance="100">
		  <li v-for="item in list">{{ item }}号商品</li>
		</ul>
		<div class="loadmore_msg">
			<span>加载更多</span>
			<mt-spinner type="triple-bounce" color="#26a2ff"></mt-spinner>
		</div>
	</div>

</template>


<script>
	import { InfiniteScroll } from 'mint-ui';
	import { Spinner } from 'mint-ui';
	export default ({
		data(){
			return {
				list:[1,2,3,4,5,6,7,8]
			}
		},
		methods :{
			loadMore(){
				var that = this;
				that.loading = true;
			  	setTimeout(() => {
			    let last = that.list[that.list.length - 1];
				    for (let i = 1; i <= 10; i++) {
				      that.list.push(last + i);
				    }
				    that.loading = false;
				}, 2500);
			}
		}
	})
</script>


<style lang="less">
	.loanmore_page{
		ul{
			li{
				width: 100%;height: 2rem;line-height: 2rem;text-align: center;border-bottom:1px solid #ccc;font-size: 1rem;color: green;font-weight:bold;
			}
		}
		.loadmore_msg{
			text-align:center;
			span {display:inline-block;height:1rem;line-height:1rem;color:rgb(204, 204, 204);}
		}
	}
	.mint-spinner-triple-bounce{display: inline !important;}

</style>